<!DOCTYPE html>
<html th:lang="#{lang}">
<head>
    <title th:text="|${chapter.title}-${comic.title}|"></title>
    <meta name="keywords" th:content="|${comic.title},#{keywords}|">
    <meta name="description" th:content="|${comic.intro}-#{description}|">
    <div th:replace="common/meta"></div>
    <style>
        .li_img {
            position: relative;
            max-width: 100%;
            max-height: 100%;
        }
        .overlay {
            position: absolute;
            background-color: rgba(255, 0, 255, 0.9);
            color: black;
            justify-content: center;
            align-items: center;
            text-align: center;
            overflow: visible;
            word-wrap: break-word;
            white-space: normal;
            display: none;
        }
    </style>
</head>
<body>
<div th:replace="common/header-back:: header(${chapter.title},${lang})"></div>

<div th:replace="common/cate:: cate(${cates})"></div>
<div class="cartoon_chapter">
    <div class="chapter_head">
        <div class="author">
            <h4>
                <a th:href="${'/comic/'+comic.id}">
                <i><img height="30" width="30" th:src="${comic.cover}" th:alt="${comic.title}" /></i>
                <span th:text="${comic.title}">title</span>
                </a>
            </h4>
            <p class="btn_group">
                <a class="read_first" th:href="|/comic/chapter/${comic.id}/${page.firstId}|" th:text="#{comic.read}">read</a>
                <a class="subscribe_work" href="javascript:;" th:text="#{comic.favorite}">fav</a>
            </p>
        </div>
    </div>
    <ul class="cartoon">
        <li class="li_img" th:each="img,state:${imgs}">
            <img th:id="|img${state.index}|" th:src="${img}" style="display:inline" alt="" />
            <th:block th:if="${recVos != null}">
                <th:block th:if="${recVos[state.index] != null}" th:each="item:${recVos[state.index]}">
                    <th:block th:each="rec,i:${item.l}">
                <div th:id="|o${state.index}_${i.index}|" th:data="${rec.f}" class="overlay">[(${rec.w})]</div>
                    </th:block>
                </th:block>
            </th:block>
        </li>
    </ul>
    <div class="cartoon_around flexbox">

        <div class="flex1">
            <a class="prev" th:style="${page.prevClass}" th:href="${page.prevUrl}"><i></i>- Previous</a>
        </div>
        <div class="flex1">
            <a class="next" th:style="${page.nextClass}" th:href="${page.nextUrl}">Next -<i></i></a>
        </div>
    </div>
</div>
<div class="hot_recommend three cartoon_list"><h2 class="ellipsis" th:text="|[${comic.title}]#{comic.random}|">看《甜美沦陷》的人也同时在看这些漫画</h2>
    <ul class="flexbox">
        <li class="flex1" th:each="r:${random}">
            <a th:href="${'/comic/'+r.id}">
                <span class="pic"><img th:src="${r.cover}" th:alt="${r.title}"></span>
                <h6 th:text="${r.title}">title</h6>
            </a>
        </li>
    </ul>
</div>
<div th:replace="common/js"></div>
<div th:replace="common/footer"></div>
</body>
<script th:inline="javascript">
    function adjustOverlay() {
        /*[# th:each="item, i : ${detVos}" th:if="${item} != null"]*/
        const img[(${i.index})] = document.getElementById('img[(${i.index})]');
        const rate[(${i.index})] = img[(${i.index})].clientWidth/[(${item.s.w})];
        /*[# th:each="o, j:${item.l}"]*/
        const overlay[(${i.index})]_[(${j.index})] = document.getElementById('o[(${i.index})]_[(${j.index})]');
        overlay[(${i.index})]_[(${j.index})].style.left = [(${o.x})] * rate[(${i.index})] + 'px';
        overlay[(${i.index})]_[(${j.index})].style.top = [(${o.y})] * rate[(${i.index})] + 'px';
        overlay[(${i.index})]_[(${j.index})].style.width = [(${o.w})] * rate[(${i.index})] + 'px';
        overlay[(${i.index})]_[(${j.index})].style.minHeight = [(${o.h})] * rate[(${i.index})] + 'px';
        overlay[(${i.index})]_[(${j.index})].style.fontSize = overlay[(${i.index})]_[(${j.index})].getAttribute('data') * rate[(${i.index})] + 'px';
        overlay[(${i.index})]_[(${j.index})].style.display = 'block';
        /*[/]*/
        /*[/]*/
    }

    window.onload = adjustOverlay;
    window.onresize = adjustOverlay;
</script>
</html>